<template>
	<VScaleScreen ref="scale-screen" width="1920" height="1080">
		<div class="blackImage"></div>
		<div>
			<el-container>
				<el-header class="app-header">
					<div class="headButtonBox1">
						<div class="headButton no-select" @click="footerButtonClick1">首页</div>
						<div class="headButton no-select" @click="footerButtonClick2">数据总览</div>
						<div class="headButton no-select" @click="footerButtonClick3">综合分析</div>
					</div>

					<div class="headButtonBox2">
						<div class="headButton no-select">历史趋势</div>
						<div class="headButton no-select">系统管理</div>
						<div class="headButton no-select">控制系统</div>
					</div>
					<h1>垚鑫科技电子有限公司</h1>
				</el-header>
				<el-main class="el-main"><component :is="currentComponet" :propsData="this.computedPropsData"></component></el-main>
				<showData1Vue style="transform: scale(1.2)"></showData1Vue>
			</el-container>
			<!-- <el-footer class="el-footer">
				第一排按钮
				<div class="footer-button1">
					<div v-for="(item, index) in footerButton.footerButton1" :key="index">
						<el-button plain @click="item.click ? item.click() : null" :type="item.type">{{ item.name }}</el-button>
					</div>
				</div>
				第二排按钮
				<div class="footer-button2">
					<div v-for="(item, index) in footerButton.footerButton2" :key="index">
						<el-button plain @click="item.click ? item.click() : null" :type="item.type">{{ item.name }}</el-button>
					</div>
				</div>
			</el-footer> -->
		</div>
	</VScaleScreen>
</template>

<script>
// 导入组件
import StatementPageVue from '../components/StatementPage.vue';
import HelloWorldVue from '@/components/HelloWorld.vue';
import VScaleScreen from 'v-scale-screen';
import showData1Vue from '@/components/showData1.vue';

export default {
	// 注册组件
	components: { StatementPageVue, HelloWorldVue, VScaleScreen, showData1Vue },
	// 数据
	data() {
		// 如果在执行顺序上遇到问题可以使用此
		// const self = this;
		return {
			// 图片动态加载
			image: {
				image611: require('@/static/image/image611.png'),
				image610: require('@/static/image/image610.png'),
				image609: require('@/static/image/image609.png'),
				image608: require('@/static/image/image608.png')
			},
			// main组件
			currentComponet: StatementPageVue,

			// 按钮信息
			footerButton: {
				footerButton1: [
					{
						type: 'info',
						name: '报表',
						click: () => this.footerButtonClick1()
					},
					{
						type: 'info',
						name: '功能1',
						click: () => this.footerButtonClick2()
					},
					{
						type: 'info',
						name: '功能1'
					},
					{
						type: 'info',
						name: '功能1'
					},
					{
						type: 'info',
						name: '功能1'
					},
					{
						type: 'info',
						name: '功能1'
					}
				],
				footerButton2: [
					{
						type: 'info',
						name: '功能1',
						click: () => this.footerButtonClick1()
					},
					{
						type: 'info',
						name: '功能1'
					},
					{
						type: 'info',
						name: '功能1'
					},
					{
						type: 'info',
						name: '功能1'
					},
					{
						type: 'info',
						name: '功能1'
					},
					{
						type: 'info',
						name: '功能1'
					}
				]
			},

			// 组件信息传递
			componentsData: {
				// 组件1
				statementPage: {
					tableData: [
						{ 0: '2016-05-01', 1: '王小虎', 2: '上海市普陀区金沙江路 1518 弄' },
						{ 0: '2016-05-02', 1: '李小花', 2: '北京市朝阳区朝阳路 123 号' },
						{ 0: '2016-05-03', 1: '张大山', 2: '广州市天河区天河路 456 号' },
						{ 0: '2016-05-04', 1: '刘小美', 2: '深圳市福田区福田路 789 号' },
						{ 0: '2016-05-05', 1: '陈小刚', 2: '杭州市西湖区西湖路 101 号' },
						{ 0: '2016-05-04', 1: '刘小美', 2: '深圳市福田区福田路 789 号' },
						{ 0: '2016-05-05', 1: '陈小刚', 2: '杭州市西湖区西湖路 101 号' }
					],
					columns: [
						{ prop: '0', label: '日期' },
						{ prop: '1', label: '姓名' },
						{ prop: '2', label: '地址' }
					]
					// name: '我的'
				},
				// 组件2
				showData1Vue: {
					name: '组件2',
					tableData: [
						{
							name: '电机速度',
							value: 20,
							numberType: 'int',
							units: 'rpm'
						},
						{
							name: '电机速度2',
							value: 202,
							numberType: 'int',
							units: 'rpm'
						},
						{
							name: '电机速度3',
							value: 203,
							numberType: 'int',
							units: 'rpm'
						},
						{
							name: '电机速度4',
							value: 201,
							numberType: 'int',
							units: 'rpm'
						},
						{
							name: '电机速度5',
							value: 203,
							numberType: 'int',
							units: 'rpm'
						}
					]
				}
			}
		};
	},

	// 方法
	methods: {
		footerButtonClick1() {
			// 切换组件
			this.currentComponet = StatementPageVue;
		},
		footerButtonClick2() {
			this.currentComponet = showData1Vue;
		},
		footerButtonClick3() {
			this.componentsData.showData1Vue.num++;
			this.componentsData.showData1Vue.tableData[0].value++;
		},
		// 判断传递哪种数据
		propsDataMethods() {
			// 如果是组件A
			if (this.currentComponet == StatementPageVue) {
				return this.componentsData.statementPage;
			}

			if (this.currentComponet == showData1Vue) {
				return this.componentsData.showData1Vue;
			}
		}
	},
	computed: {
		computedPropsData() {
			return this.propsDataMethods();
		}
	}
};
</script>

<style>
/* 背景图 */
.blackImage {
	width: 2000px;
	height: 500px;
	position: fixed;
	background-image: v-bind('image.image611');
	background-size: cover;
	margin: 600px 0 0 0;
}
/* 每一排按钮样式 */
.headButtonBox1 {
	position: fixed;
	display: flex;
	width: 570px;
	height: 36px;
	margin: 30px 0 0 0px;
}
.headButtonBox2 {
	position: fixed;
	display: flex;
	width: 570px;
	height: 36px;
	margin: 30px 0 0 1380px;
}
/* 选中时改变样式 */
.headButton:active {
	background-image: url('~@/static/image/image610.png');
}
/* 悬浮改变鼠标样式 */
.headButton:hover {
	cursor: pointer;
}
/* 按钮样式 */
.headButton {
	width: 160px;
	height: 36px;
	background-image: url('~@/static/image/image609.png');
	background-size: 100% 36px;
	text-align: center;
	line-height: 43px;
	cursor: default;
	/* margin-left: 30px; */
}
.headButton1 {
	margin-top: 50px;
}
.app-header h1 {
	font-family: '微软雅黑', sans-serif !important;
	font-size: 41px;
	font-weight: 700;
	text-align: center;
	margin: 0 auto;
}
/* 头部样式 */
.app-header {
	background-image: url('~@/static/image/image608.png');
	background-size: cover;
	color: white;

	line-height: 70px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	height: 85px !important;
}

/* 中间部分 */
.el-main {
	min-height: calc(100vh - 150px);
	/* background-color: aqua; */
}

/* 底部样式 */
.el-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	/* 两排高度 */
	/* height: 150px !important; */
	height: 75px !important;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

/* 设置按钮样式 */
.el-footer .el-button {
	margin: auto 30px;
	font-size: 18px;
	color: #474747 !important;
	padding: 12px 16px;
}

/* 设置两排按钮格式 */
.footer-button1 > div,
.footer-button2 > div {
	display: inline-block;
}

/* 第一排按钮样式 */
.footer-button1 {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* 第二排按钮样式 */
.footer-button2 {
	justify-content: center;
	width: 100%;
}
</style>
